<template>
  <base-option :selected="selected" :field-config="fieldConfig" :form-config="formConfig">
    <template #default="{ hideOptions }">
      <el-form-item v-if="fieldConfig.defaultValue !== undefined && hideOptions('defaultValue')" label="默认值">
        <el-select v-model="fieldConfig.defaultValueType" placeholder="">
          <el-option label="自定义" :value="0" />
          <el-option label="公式编辑" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="fieldConfig.defaultValueType === 0">
        <el-input
          v-model="fieldConfig.defaultValue"
          type="textarea"
          :rows="4"
          :maxlength="fieldConfig.maxlength"
          placeholder="请输入默认值"
          show-word-limit
        />
      </el-form-item>

      <el-form-item v-if="fieldConfig.maxlength !== undefined && hideOptions('maxlength')" label="长度限制">
        <el-input
          v-model="fieldConfig.maxlength"
          type="number"
          min="10"
          max="3000"
          placeholder="最大字符长度"
          @blur="limitInput"
        />
      </el-form-item>

      <el-form-item v-if="fieldConfig.rows !== undefined && hideOptions('rows')" label="行数高度">
        <el-input-number v-model="fieldConfig.rows" :min="1" :max="9" controls-position="right" />
      </el-form-item>
      <el-form-item v-if="fieldConfig.ellipsis !== undefined && hideOptions('ellipsis')" label="展示的行数">
        <el-input-number v-model="fieldConfig.ellipsis" :min="1" controls-position="right" />
      </el-form-item>
      <el-form-item v-if="fieldConfig.expandTips !== undefined && hideOptions('expandTips')" label="展开操作">
        <el-input v-model="fieldConfig.expandTips" placeholder="展开" />
      </el-form-item>
      <el-form-item v-if="fieldConfig.retractTips !== undefined && hideOptions('retractTips')" label="收起操作">
        <el-input v-model="fieldConfig.retractTips" placeholder="收起" />
      </el-form-item>
      <el-form-item v-if="fieldConfig.showWordLimit !== undefined && hideOptions('showWordLimit')" label="显示计数器">
        <el-switch v-model="fieldConfig.showWordLimit" size="default" />
      </el-form-item>
      <el-form-item v-if="fieldConfig.hideTips !== undefined && hideOptions('hideTips')" label="隐藏展开提示">
        <el-switch v-model="fieldConfig.hideTips" />
      </el-form-item>
    </template>
  </base-option>
</template>

<script setup>
import { toRefs } from 'vue'
import baseOption from './base-option.vue'
import propsDefinition from './props'
const props = defineProps(propsDefinition)
const { selected, fieldConfig, formConfig } = toRefs(props)

const limitInput = () => {
  if (fieldConfig.value.maxlength > 3000) {
    fieldConfig.value.maxlength = '3000'
  }
  if (fieldConfig.value.maxlength < 10) {
    fieldConfig.value.maxlength = '10'
  }
}
</script>
